<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>危机干预系统 - 贵州省先进计算全省重点实验室</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/crisis.css' %}">
</head>
<body>
    <div class="header" style="padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0 4px 6px rgba(0,0,0,0.2);">
        <h1>危机干预系统</h1>
        <button onclick="history.back()" style="padding: 8px 16px; font-size: 16px; background: linear-gradient(135deg, #4a5568, #2d3748); color: white; border: none; border-radius: 10px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: background 0.3s ease;">
            🔙 返回上一页
        </button>

    </div>

    <div class="crisis-container">
        <!-- 左侧用户信息面板 -->
        <div class="user-info-panel">
            <div class="panel-header">
                <span style="font-size: 24px;">👤</span>
                <h2>用户风险评估</h2>
                <span class="crisis-level crisis-high" id="crisisLevel">高风险</span>
            </div>

            <div class="user-basic-info">
                <h3 style="margin-bottom: 15px; color: #2d3748;">📋 基本信息</h3>
                <div class="info-row">
                    <span class="info-label">姓名:</span>
                    <span class="info-value" id="userName">张三</span>
                </div>
                <div class="info-row">
                    <span class="info-label">年龄:</span>
                    <span class="info-value" id="userAge">25岁</span>
                </div>
                <div class="info-row">
                    <span class="info-label">性别:</span>
                    <span class="info-value" id="userGender">男</span>
                </div>
                <div class="info-row">
                    <span class="info-label">联系方式:</span>
                    <span class="info-value" id="userContact">138****5678</span>
                </div>
                <div class="info-row">
                    <span class="info-label">紧急联系人:</span>
                    <span class="info-value" id="emergencyContact">李四 (139****1234)</span>
                </div>
                <div class="info-row">
                    <span class="info-label">最后活跃:</span>
                    <span class="info-value" id="lastActive">2分钟前</span>
                </div>
            </div>

            <div class="risk-indicators">
                <h3 style="margin-bottom: 15px; color: #2d3748;">⚠️ 风险指标</h3>

                <div class="risk-item risk-high">
                    <span style="margin-right: 10px;">🔴</span>
                    <div>
                        <strong>抑郁风险</strong>
                        <div class="progress-bar">
                            <div class="progress-fill progress-high" style="width: 85%"></div>
                        </div>
                        <small>PHQ-9得分: 17/27 (重度抑郁)</small>
                    </div>
                </div>

                <div class="risk-item risk-high">
                    <span style="margin-right: 10px;">🔴</span>
                    <div>
                        <strong>焦虑风险</strong>
                        <div class="progress-bar">
                            <div class="progress-fill progress-high" style="width: 78%"></div>
                        </div>
                        <small>GAD-7得分: 14/21 (重度焦虑)</small>
                    </div>
                </div>

                <div class="risk-item risk-high">
                    <span style="margin-right: 10px;">🔴</span>
                    <div>
                        <strong>自杀风险</strong>
                        <div class="progress-bar">
                            <div class="progress-fill progress-high" style="width: 72%"></div>
                        </div>
                        <small>检测到自杀倾向关键词</small>
                    </div>
                </div>

                <div class="risk-item risk-medium">
                    <span style="margin-right: 10px;">🟡</span>
                    <div>
                        <strong>睡眠质量</strong>
                        <div class="progress-bar">
                            <div class="progress-fill progress-medium" style="width: 60%"></div>
                        </div>
                        <small>PSQI得分: 12/21 (睡眠质量差)</small>
                    </div>
                </div>

                <div class="risk-item risk-low">
                    <span style="margin-right: 10px;">🟢</span>
                    <div>
                        <strong>社会支持</strong>
                        <div class="progress-bar">
                            <div class="progress-fill progress-low" style="width: 40%"></div>
                        </div>
                        <small>社会支持量表得分: 35/66</small>
                    </div>
                </div>
            </div>

            <div style="margin-top: 25px;">
                <h3 style="margin-bottom: 15px; color: #2d3748;">📈 最近情绪趋势</h3>
                <div class="mood-timeline">
                    <div class="mood-point" style="background: #38a169;">7</div>
                    <div class="mood-point" style="background: #dd6b20;">5</div>
                    <div class="mood-point" style="background: #e53e3e;">3</div>
                    <div class="mood-point" style="background: #e53e3e;">2</div>
                    <div class="mood-point" style="background: #e53e3e;">1</div>
                </div>
                <small style="color: #718096;">过去5天情绪评分 (1-10分，10分最佳)</small>
            </div>
        </div>

        <!-- 右侧数据可视化面板 -->
        <div class="visualization-panel">
            <div class="panel-header">
                <span style="font-size: 24px;">📊</span>
                <h2>心理健康数据分析</h2>
            </div>

            <div class="data-grid">
                <div class="data-card">
                    <h3>总体风险等级</h3>
                    <div class="value" style="color: #e53e3e;">高风险</div>
                </div>
                <div class="data-card">
                    <h3>风险评分</h3>
                    <div class="value" style="color: #e53e3e;">78/100</div>
                </div>
                <div class="data-card">
                    <h3>持续天数</h3>
                    <div class="value" style="color: #dd6b20;">12天</div>
                </div>
                <div class="data-card">
                    <h3>干预次数</h3>
                    <div class="value" style="color: #38a169;">3次</div>
                </div>
            </div>

            <div class="chart-container">
                <div class="chart-title">心理健康指标趋势图</div>
                <div class="chart-placeholder" id="trendChart">
                    <canvas id="trendCanvas" width="600" height="280"></canvas>
                </div>
            </div>

            <div class="chart-container">
                <div class="chart-title">各维度风险分布</div>
                <div class="chart-placeholder" id="riskChart">
                    <canvas id="riskCanvas" width="600" height="280"></canvas>
                </div>
            </div>

            <div class="chart-container">
                <div class="chart-title">干预效果评估</div>
                <div class="chart-placeholder" id="interventionChart">
                    <canvas id="interventionCanvas" width="600" height="280"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- 紧急操作按钮 -->
    <div class="emergency-actions">
        <button class="emergency-btn btn-emergency" onclick="openEmergencyModal()">
            <span>🚨</span>
            紧急联系
        </button>
        <button class="emergency-btn btn-contact" onclick="contactTherapist()">
            <span>👨‍⚕️</span>
            联系专家
        </button>
        <button class="emergency-btn btn-resources" onclick="showResources()">
            <span>📚</span>
            自助资源
        </button>
    </div>

    <!-- 紧急联系模态框 -->
    <div id="emergencyModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeEmergencyModal()">&times;</span>
            <h2 style="color: #e53e3e; margin-bottom: 20px;">🚨 紧急联系方式</h2>
            <div style="background: #fed7d7; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
                <h3>24小时心理危机干预热线:</h3>
                <p style="font-size: 24px; font-weight: bold; color: #c53030;">400-161-9995</p>
            </div>
            <div style="background: #feebc8; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
                <h3>本地心理健康中心:</h3>
                <p style="font-size: 18px; font-weight: bold;">0851-86800120</p>
            </div>
            <div style="background: #c6f6d5; padding: 20px; border-radius: 10px;">
                <h3>紧急联系人:</h3>
                <p>李四: 139****1234</p>
                <p>张五: 137****5678</p>
            </div>
        </div>
    </div>

    <div class="footer">
        © 2025 贵州省先进计算全省重点实验室 版权所有 | 危机干预系统
    </div>


    {% load static %}
    <script src="{% static "js/crisis.js" %}"></script>

</body>
</html>